<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<link rel="stylesheet" href="../../ZY/css/ydui.css" />
	<link rel="stylesheet" href="../../ZY/css/mystyle.css" />

	<link rel="shortcut icon" href="favicon.ico"> <link href="/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
	<link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

	<link href="/css/animate.min.css" rel="stylesheet">
	<link href="/css/style.min.css?v=4.0.0" rel="stylesheet">
	<!-- Sweet Alert -->
	<link href="/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

	<!--    <script src="/js/jquery.min.js?v=2.1.4"></script>-->
	<!--    <script src="/js/bootstrap.min.js?v=3.3.5"></script>-->
	<script src="/js/plugins/footable/footable.all.min.js"></script>
	<!--    <script src="/js/content.min.js?v=1.0.0"></script>-->

	<!--    <script src="/js/jquery.min.js?v=2.1.4"></script>-->
	<script src="/js/bootstrap.min.js?v=3.3.5"></script>
	<script src="/js/plugins/sparkline/jquery.sparkline.min.js"></script>
	<script src="/js/plugins/peity/jquery.peity.min.js"></script>
	<script src="/js/content.min.js?v=1.0.0"></script>
	<script src="/js/demo/peity-demo.min.js"></script>
	<script src="/js/plugins/gritter/jquery.gritter.min.js"></script>
	<script src="/js/plugins/sweetalert/sweetalert.min.js"></script>
	<!-- 自适应解决方案类库 -->
	<script src="../../ZY/js/ydui.flexible.js"></script>
	<script src="/js/bootstrap.min.js?v=3.3.5"></script>
	<script src="/js/plugins/sparkline/jquery.sparkline.min.js"></script>
	<script src="/js/plugins/peity/jquery.peity.min.js"></script>
	<script src="/js/content.min.js?v=1.0.0"></script>
	<script src="/js/demo/peity-demo.min.js"></script>
	<script src="/js/plugins/gritter/jquery.gritter.min.js"></script>
	<script src="/js/plugins/sweetalert/sweetalert.min.js"></script>
	<meta charset="UTF-8">
	<title>报销记账系统 - iOS风格</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<style>
		:root {
			--primary-color: #007AFF;
			--background-color: #FFFFFF;
			--secondary-background: #F5F5F7;
			--text-primary: #1D1D1F;
			--text-secondary: #86868B;
			--border-color: #D2D2D7;
			--button-active: #0063CC;
			--error-color: #FF3B30;
		}

		body {
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell;
			background-color: var(--background-color);
			color: var(--text-primary);
			line-height: 1.6;
			margin: 0;
			padding: 20px 16px;
		}

		.container {
			max-width: 680px;
			margin: 0 auto;
		}

		.form-section {
			background: var(--background-color);
			border-radius: 18px;
			padding: 24px;
			margin-bottom: 24px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.04);
		}

		.section-title {
			font-size: 20px;
			font-weight: 600;
			margin: 0 0 28px 0;
		}

		.input-group {
			margin-bottom: 24px;
		}

		.input-label {
			display: block;
			font-size: 15px;
			color: var(--text-secondary);
			margin-bottom: 8px;
			font-weight: 400;
		}

		.input-field {
			width: 100%;
			padding: 14px 16px;
			border: 1px solid var(--border-color);
			border-radius: 12px;
			font-size: 16px;
			transition: all 0.2s ease;
			background: var(--background-color);
			-webkit-appearance: none;
		}

		select.input-field {
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007AFF'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
			background-repeat: no-repeat;
			background-position: right 16px center;
			background-size: 18px;
			padding-right: 40px;
		}

		.input-field:focus {
			border-color: var(--primary-color);
			box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
			outline: none;
		}

		.upload-section {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;
			margin-top: 20px;
		}

		.upload-card {
			background: var(--secondary-background);
			border-radius: 18px;
			padding: 24px;
			text-align: center;
			transition: all 0.2s ease;
			border: 1px solid transparent;
			cursor: pointer;
		}

		.upload-card:active {
			background: #EBEBF0;
			transform: scale(0.98);
		}

		.upload-icon {
			width: 60px;
			height: 60px;
			margin-bottom: 16px;
			object-fit: contain;
		}

		.upload-label {
			color: var(--primary-color);
			font-size: 16px;
			font-weight: 500;
			margin: 0;
		}

		.submit-button {
			display: block;
			width: 100%;
			background: var(--primary-color);
			color: white;
			border: none;
			border-radius: 30px;
			padding: 18px;
			font-size: 17px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.2s ease;
		}

		.submit-button:active {
			background: var(--button-active);
			transform: scale(0.96);
		}

		.preview-image {
			width: 100%;
			border-radius: 12px;
			margin-top: 16px;
			border: 1px solid var(--border-color);
		}

		.error-message {
			color: var(--error-color);
			font-size: 13px;
			margin-top: 6px;
			display: none;
		}

		.input-error {
			border-color: var(--error-color) !important;
			box-shadow: 0 0 0 3px rgba(255,59,48,0.15);
		}

		@media (prefers-color-scheme: dark) {
			:root {
				--background-color: #000000;
				--secondary-background: #1C1C1E;
				--text-primary: #FFFFFF;
				--text-secondary: #8E8E93;
				--border-color: #38383A;
			}

			.input-field {
				background: #1C1C1E;
			}

			.upload-card {
				background: #2C2C2E;
			}

			.upload-card:active {
				background: #3A3A3C;
			}
		}
	</style>
</head>
<body>
<div class="container">
	<form id="myForm" action="../zy/submit" method="post">
		<!-- 基本信息部分 -->
		<section class="form-section">
			<h2 class="section-title">基本信息</h2>

			<div class="input-group">
				<label class="input-label">参赛者选择</label>
				<select class="input-field" name="name" required>
					<option value="" disabled selected hidden>请选择参赛者</option>
					<option value="WT">王涛</option>
					<option value="CTH">陈天华</option>
					<option value="WP">王鹏</option>
				</select>
				<div class="error-message">请选择参赛者</div>
			</div>

			<div class="input-group">
				<label class="input-label">当前净资产（元）</label>
				<input type="number"
					   class="input-field"
					   placeholder="请输入数字"
					   name="money"
					   required>
				<div class="error-message">请输入有效金额</div>
			</div>

			<div class="input-group">
				<label class="input-label">持股类型</label>
				<select class="input-field" name="stockDetail" required>
					<option value="" disabled selected hidden>请选择持股类型</option>
					<option value="HK">货款</option>
					<option value="CL">橙联费用</option>
				</select>
				<div class="error-message">请选择持股类型</div>
			</div>

			<div class="input-group">
				<label class="input-label">当日转账明细</label>
				<input type="text"
					   class="input-field"
					   placeholder="例：转出-100，转入+100"
					   name="outMoney">
			</div>
		</section>

		<!-- 凭证上传部分 -->
		<section class="form-section">
			<h2 class="section-title">凭证上传</h2>

			<div class="upload-section">
				<label class="upload-card" for="ccmxFile">
					<img src="../../ZY/images/ccmx.png" class="upload-icon">
					<p class="upload-label">持仓记录</p>
					<input type="file"
						   id="ccmxFile"
						   hidden
						   accept="image/*"
						   onchange="handleFileSelect(this, 'ccmx')">
				</label>

				<label class="upload-card" for="zzjlFile">
					<img src="../../ZY/images/yzzz.png" class="upload-icon">
					<p class="upload-label">转账记录</p>
					<input type="file"
						   id="zzjlFile"
						   hidden
						   accept="image/*"
						   onchange="handleFileSelect(this, 'zzjl')">
				</label>
			</div>

			<div id="previewContainer"></div>
			<input type="hidden" id="ccmx" name="ccmx">
			<input type="hidden" id="zzjl" name="zzjl">
		</section>

		<!-- 提交按钮 -->
		<button type="submit" class="submit-button">提交申请</button>
	</form>
</div>

<script>
	// 文件处理函数
	function handleFileSelect(input, type) {
		const file = input.files[0];
		if (!file) return;

		const reader = new FileReader();
		reader.onload = function(e) {
			// 创建预览
			const preview = document.createElement('img');
			preview.className = 'preview-image';
			preview.src = e.target.result;

			// 压缩并存储
			compressImage(preview, 0.8).then(base64 => {
				document.getElementById(type).value = base64;
				document.getElementById('previewContainer').appendChild(preview);
			});
		}
		reader.readAsDataURL(file);
	}

	// 图片压缩函数
	function compressImage(img, quality) {
		return new Promise(resolve => {
			const canvas = document.createElement('canvas');
			const ctx = canvas.getContext('2d');

			canvas.width = img.width * 0.8;
			canvas.height = img.height * 0.8;

			ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
			resolve(canvas.toDataURL('image/jpeg', quality));
		});
	}

	// 表单验证
	document.getElementById('myForm').addEventListener('submit', function(e) {
		e.preventDefault();

		// // 清除旧错误
		// document.querySelectorAll('.input-field').forEach(field => {
		// 	field.classList.remove('input-error');
		// 	const errorMsg = field.closest('.input-group').querySelector('.error-message');
		// 	errorMsg.style.display = 'none';
		// });

		// 验证逻辑
		let isValid = true;
		const requiredFields = document.querySelectorAll('[required]');

		// requiredFields.forEach(field => {
		// 	const inputGroup = field.closest('.input-group');
		// 	const errorMsg = inputGroup.querySelector('.error-message');
		//
		// 	if (field.value.trim() === '') {
		// 		field.classList.add('input-error');
		// 		errorMsg.style.display = 'block';
		// 		isValid = false;
		// 	}
		// });

		// 特殊验证：图片必须上传
		if (!document.getElementById('ccmx').value) {
			alert('请上传持仓记录凭证');
			isValid = false;
		}

		if (isValid) {
			// 显示加载状态
			const submitBtn = document.querySelector('.submit-button');
			submitBtn.disabled = true;
			submitBtn.textContent = '提交中...';

			// 模拟提交
			setTimeout(() => {
				alert('提交成功！');
				submitBtn.disabled = false;
				submitBtn.textContent = '提交申请';
				this.reset();
			}, 1000);
		}
	});

	// 深色模式切换监听
	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
		document.documentElement.style.colorScheme = e.matches ? 'dark' : 'light';
	});
</script>
</body>
</html>